$(function () {
    // 处理顶部图片显示隐藏功能
    function handlerImgClose(){
        $(".top-img")
        .css({
            display:"none",
        })
        $(".top-img-box .open")
        .css({
            display:"none"
        })
        $(".top-img-box .close")
        .css({
            display:"block"
        })
    }
    function handlerImgOpen(){
        $(".top-img")
        .css({
            display:"block",
        })
        $(".top-img-box .open")
        .css({
            display:"block"
        })
        $(".top-img-box .close")
        .css({
            display:"none"
        })
    }
    $(".top-img-box .open").on("click",handlerImgClose)
    $(".top-img-box .close").on("click",handlerImgOpen)
    // 处理顶部显示隐藏功能
    function handlerTopleftOver() {
        $(this)
            .addClass("active")
            .find(".top-menu-first")
            // .css({
            //     display:"block",
            //     // backgroundColor:"#fff"
            // })
            // .slidedown()
            .stop(true)
            .slideDown(50)
    }
    function handlerTopleftOut() {
        $(this)
            .removeClass("active")
            .find(".top-menu-first")
            // .css({
            //     display:"none"
            // })
            .stop(true)
            .slideUp(50)
    }
    // 事件添加部分
    $(".top-left li").on("mouseenter", handlerTopleftOver)
    $(".top-left li").on("mouseleave", handlerTopleftOut)
    // $(".top-left li").on("click", handlerTopleftOver)
    // $(".top-left li").on("click", handlerTopleftOut)
    function handlerTopClose(){
        $(this)
        .parent()
        .css({
            display:"none"
        })
    }
    $(".top-left li span").on("click",handlerTopClose)
    
    // 模糊搜索功能
    function handlerCleanList(){
        $(".search-vague-list ul").html("")
    }
    function handlerSearchListOpen(){
        handlerCleanList()
        let options={
            dataType:"jsonp",
            data:{
                prod:"pc",
                form:"pc_web",
                wd:$(".search_vague").val()
            }
        }
        let def=$.ajax("http://www.baidu.com/sugrec",options)
        def.done((data)=>{
            if($(".search_vague").val()!==""){
                $(".search-vague-list")
                .css({
                    display:"block"
                })
                let {g}=data;
                g=g||[];
                if(g.length===0){

                }else{
                    // console.log(g)
                    g.map(item=>{
                        return $(`<li>${item.q}</li>`).prependTo(".search-vague-list ul")
                    })  
                }   
            }else{
                $(".search-vague-list")
                .css({
                    display:"none"
                })
            }
        })
        $(`<li><b class="iconfont icon-gengduo"></b>查找"${$(".search_vague").val()}"相关结果</li>`).appendTo(".search-vague-list ul");
    }
    function handlerSearchListClose(){
        $(".search-vague-list")
        .css({
            display:"none"
        })
    }
    $(".search_vague").on("input",handlerSearchListOpen)
    $(".search_vague").on("blur",handlerSearchListClose)
    $(".search_vague").on("focus",handlerSearchListOpen)
    $(".search-vague-list span").on("click",handlerSearchListClose)

    // 头部导航部分
    // 导航右侧部分
    function handlerNavListOpen(){
        $(this)
        .addClass("active")
        .find(".right-detail")
        .css({
            display:"block",
        })
        // .stop()
        // .show(100)
    }
    function handlerNavListClose(){
        $(this)
        .removeClass("active") 
        .find(".right-detail")
        // .css({
        //     display:"none"
        // })
        .stop()
        .hide(200)
    }
    $(".left-list li").on("mouseenter",handlerNavListOpen)
    $(".left-list li").on("mouseleave",handlerNavListClose)
    // 导航中心部分
    function handlerSpanOpen(){
        $(this)
        .addClass("active")
        .find("span")
        .css({
            display:"block",
        })
    }
    function handlerSpanClose() {
        $(this)
        .removeClass("active")
        .find("span")
        .css({
            display:"none"
        })
    }
    $(".nav-sort-center li").on("mouseenter",handlerSpanOpen)
    $(".nav-sort-center li").on("mouseleave",handlerSpanClose)
    // 轮播图部分
    let options={
        navigation:{
            nextEl:`.swiper-button-next`,
            prevEl:`.swiper-button-prev`
        },
        pagination:{
            el:`.swiper-pagination`,
            clickable:true,
        },
        effect:"fade",
        loop:true,
        autoplay:{
            delay:2000,
            disableOnInteraction: false
        }
    }
    new Swiper(".banner1",options)

    // 控制轮播图按钮显示隐藏
    function handlerBtnOpen(){
        $(".prev-btn")
        .addClass("active")
        $(".next-btn")
        .addClass("active")
    }
    function handlerBtnClose(){
        $(".prev-btn")
        .removeClass("active")
        $(".next-btn")
        .removeClass("active")
    }
    $(".banner1").on("mouseenter",handlerBtnOpen)
    $(".banner1").on("mouseleave",handlerBtnClose)


    // 为你推荐部分页面渲染
    // 请求加载，再去渲染页面
    function getRecommendData() {
        let options = {
            data: {
                pagesize: 40
            }
        }
        return $.ajax("http://localhost:8888/goods/list", options)
    }
    // function renderRecommend(data) {
    //     let { list } = data;
    //     $(".recommend-list").html(
    //         list.map(item => {
    //             return `<div class="recommend-box">
    //                        <img src="${item.img_big_logo}" alt="">
    //                     </div>`
    //         }).join("")
    //     )
    // }

    // 使用懒加载插件
    function renderRecommend(data){
        let { list }=data;

        let loadingsrc="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2Fimg_convert%2F4cc9b39aa67fccc02d179936a27290cd.gif&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668865716&t=84632e6340679c4f4bc77cde1aca4c69"

        $(".recommend-list").html(
            list.map(item=>{
                return `<div class="recommend-box" data-id="${item.goods_id}">
                            <img class="lazyload" src="${loadingsrc}" data-src="${item.img_big_logo}" alt="">
                            <p class="title">${item.title}</p>
                            <p class="price-box">
                                <i>￥</i>
                                <span class="price">${item.price}</span>
                            </p>
                        </div>`
            }).join("")
        )
        lazyload()
    }
    getRecommendData().done(renderRecommend)

    // 跳转详情页
    function jumpToDetail() {
        console.log( $(this).attr("data-id"));
        location.href = "detail.html#" + $(this).attr("data-id")
    }
    $(".recommend-list").on("click", ".recommend-box", jumpToDetail)
})